<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../css/normalize.css"/>
    <link rel="stylesheet" href="../../css/fa.css"/>
    <link rel="stylesheet" href="../../css/icon.css"/>
    <link rel="stylesheet" href="../../css/ares_animate.min.css"/>
    <link rel="stylesheet" href="../../css/ares_hover_variant.min.css"/>
    <link rel="stylesheet" href="../../css/ares_reboot.css"/>
    <link rel="stylesheet" href="../../css/app.min.css"/>
    <link rel="stylesheet" href="../../css/iframe.css"/>
    <style>

    </style>

</head>
<body>
<form class="ares-p layui-form" lay-filter="form">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input name="name" placeholder="请输入姓名" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="male" title="男" checked>
            <input type="radio" name="sex" value="female" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">出生日期</label>
        <div class="layui-input-block">
            <input name="birthday" id="birthday" placeholder="请选择出生日期" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input name="mobile" placeholder="请输入手机号" class="layui-input" lay-verify="required|phone">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">医院</label>
        <div class="layui-input-block">
            <input name="hospital" placeholder="请输入医院" class="layui-input" lay-verify="required" disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">科室</label>
        <div class="layui-input-block">
            <select name="division" lay-verify="required">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">岗位</label>
        <div class="layui-input-block">
            <select name="job" lay-verify="required" lay-filter="job">
                <option value="doctor">医生</option>
                <option value="therapist">治疗师</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-hide" id="treatment-group-div">
        <label class="layui-form-label">分组</label>
        <div class="layui-input-block">
            <select name="treatment-group">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
            <select name="role" lay-verify="required">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submit">提交表单</button>
            <span id="pwd-tip" class="layui-hide ares-text-red ares-text-xs">提示: 新建用户的默认密码为用户生日!</span>
        </div>
    </div>
</form>
</body>

<script type="text/javascript" src="../../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../aresExtends/config/layuiConfig.js"></script>
<script>
	layui.use(['laydate', 'form', 'utils', 'mandyServices', 'store', 'constants', 'qs'], function (laydate, form,utils, mandyServices, store, constants, qs) {
		var queryParams = qs.parse(location.search.substr(1)),
			profile = store.get('profile'),
            currentHospital = profile.institution.hospital,
            currentDivision = profile.institution.division;

		laydate.render({
			elem: '#birthday',
			value: new Date()
		});

		form.on('submit(submit)', function (data) {
		    var fields = data.field,
                service = null,
                $this = $(data.elem);
			console.log(fields,$this)
            if(queryParams.id){
                service = modifyMedicalInfo
            }else {
                service = addMedicalInfo
            }
            if(!service) return;
            $this.prop('disabled',true).addClass('layui-btn-disabled')
            service(fields).then(function (res) {
                utils.msgSuccess(res.message)
                $this.prop('disabled',false).removeClass('layui-btn-disabled')
                utils.layerCloseAll('iframe');
                utils.ARES.event.emit('updatePersonList');
            }).catch(function (err) {
                $this.prop('disabled',false).removeClass('layui-btn-disabled')
            })
			return false;
		});
		form.on('select(job)', function(data){
            var job = data.value;
            resetTreatmentGroupSelect(job,null);
			buildRoleSelect(null, job);
		});
		form.render();

		if(queryParams.id){
            buildProfileForm(utils.ARES.cache.person)
        }else {
			buildAddProfileForm();
			$('#pwd-tip').removeClass('layui-hide');
        }
        
        function resetTreatmentGroupSelect(job,groupId) {
		    var $treatmentGroupDiv = $('#treatment-group-div'),
                selectGroup = $('select[name="treatment-group"]');
            if (job == "therapist") {
                $treatmentGroupDiv.removeClass("layui-hide");
                selectGroup.attr('lay-verify','required')
                buildTreatmentGroupSelect(groupId);
            } else {
                $treatmentGroupDiv.addClass("layui-hide");
                selectGroup.attr('lay-verify',null);
            }
        }
        
		function buildProfileForm(data) {
			var profileInfo = data.profile_info,
                hospital = data.hospital,
                treatmentGroup = data.treatment_group,
                division = data.division;

            buildDivisionSelect(division.id,hospital.id);
            resetTreatmentGroupSelect(data.job,treatmentGroup ? treatmentGroup.id : null);
            buildRoleSelect(data.role.id, data.job);

            form.val("form", {
                name: profileInfo.name,
                sex: profileInfo.sex,
                birthday: profileInfo.birthday,
                mobile: data.mobile,
                hospital: hospital.name,
                division: division.id,
                job: data.job,
                'treatment-group': treatmentGroup ? treatmentGroup.id : '',
                role: data.role.id,
            });
            form.render();
		}

		function buildAddProfileForm() {
			form.val("form", {
				hospital: currentHospital.name
			});
			buildDivisionSelect(currentDivision.id, currentHospital.id);
			buildRoleSelect(null, 'doctor');
		}

		function buildRoleSelect(defaultVal, job) {
			var node = $('select[name="role"]');
			node.empty().append('<option value=""></option>');
			if (job == "doctor") {
				$.each(constants.doctorRoles, function (idx, val) {
					var option = $("<option>");
					option.text(val.v);
					option.attr("value", val.k);
					if (val.k == defaultVal) {
						option.attr("selected", true);
					}
					node.append(option);
				});
			} else if (job == "therapist") {
				$.each(constants.therapistRoles, function (idx, val) {
					var option = $("<option>");
					option.text(val.v);
					option.attr("value", val.k);
					if (val.k == defaultVal) {
						option.attr("selected", true);
					}
					node.append(option);
				});
			}
            form.render('select');
		}

		function buildTreatmentGroupSelect(defaultVal) {
			var node = $('select[name="treatment-group"]');
			node.empty().append('<option value=""></option>');
			mandyServices.mandy_get_treatment_group_syn().then(function (res) {
				var data = res.data;
				$.each(data.treat_groups, function (idx, val) {
					var option = $("<option>");
					option.text(val.name);
					option.attr("value", val.id);
					if (val.id == defaultVal) {
						option.attr("selected", true);
					}
					node.append(option);
				});
				form.render('select');
			});
		}

		function buildDivisionSelect(defaultVal, hospitalId) {
			var node = $('select[name="division"]');
			node.empty().append('<option value=""></option>');
			mandyServices.mandy_get_division_list_syn(hospitalId).then(function (res) {
				var data = res.data;
				$.each(data.division_list, function (idx, val) {
					var option = $("<option>");
					option.text(val.name);
					option.attr("value", val.id);
					if (val.id == defaultVal) {
						option.attr("selected", true);
					}
					node.append(option);
				});
				form.render('select');
			});
		}

		function modifyMedicalInfo(data) {
			return mandyServices.mandy_put_medical_info(queryParams.id, data.name, data.sex, data.birthday, data.division, data.job, data.role,
				data['treatment-group'])
		}


		function addMedicalInfo(data) {
			return mandyServices.mandy_add_medical_info(data.mobile, data.birthday.replaceAll("-", ""), data.name, data.sex, data.birthday, data.division, data.job, data.role, "", data['treatment-group'])
		}
	})
</script>


</html>